<template>
    <div class="container">
        <swiperP :list="bannerList" :height="400">
            <div class="search-container">
                <MaterialStoreSearchP color="#fff" @search="onSearch" />
            </div>
        </swiperP>

        <div class="main">
            <div class="filter-box">
                <div class="filter-item">
                    <div class="filter-label">素材类型：</div>
                    <div class="filter-group">
                        <div class="filter-btn" v-for="(item, index) in categoryList"
                            :class="{ active: item.id === active[0] }" :key="item.id" @click="onCateActive(0, item.id)">
                            {{ item.name }}
                        </div>
                    </div>
                </div>

                <div class="filter-item">
                    <div class="filter-label">素材细分：</div>
                    <div class="filter-group">
                        <div class="filter-btn" :class="{
                            active: active[1] === 0,
                        }" @click="onCateActive(1, 0)">
                            全部
                        </div>
                        <div class="filter-btn" :class="{
                            active: active[1] === item.id,
                        }" v-for="item in cate2" :key="item.id" @click="onCateActive(1, item.id)">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- tabs -->
            <div class="tabs" v-if="false">
                <div class="tab-item" :class="{ active: tabActive == 0 }" @click="tabActive = 0">
                    综合排序
                </div>
                <div class="tab-item" :class="{ active: tabActive == 1 }" @click="tabActive = 1">
                    最新上传
                </div>
                <div class="tab-item" :class="{ active: tabActive == 2 }" @click="tabActive = 2">
                    最多点赞
                </div>
                <div class="tab-item" :class="{ active: tabActive == 3 }" @click="tabActive = 3">
                    最多收藏
                </div>
                <div class="tab-item" :class="{ active: tabActive == 4 }" @click="tabActive = 4">
                    免费
                </div>
                <div class="tab-item" :class="{ active: tabActive == 5 }" @click="tabActive = 5">
                    积分兑换
                </div>
                <div class="tab-item" :class="{ active: tabActive == 6 }" @click="onPriceFilter">
                    价格

                    <img class="icon-sort" :src="`${_oss_}images/${!priceSortType
                        ? 'icon-sort'
                        : 'icon-' + priceSortType
                        }.png`" />

                    <div class="number-group">
                        <input class="number-input" type="text" />
                        <div class="divider"></div>
                        <input class="number-input" type="text" />
                    </div>
                </div>

                <!-- <div class="consultation-button">咨询定制服务</div> -->
            </div>

            <div class="list-box" v-loading="isLoading">
                <MaterialStoreGroupP v-if="list.length" :data="list" />
                <!-- <MaterialStoreGroupP
                    :data="mockData.list"
                    v-loading="isLoading"
                /> -->
                <el-empty :image-size="150" description="换个词搜搜，或者联系客服定制" v-else />
            </div>
        </div>
    </div>

    <!-- <DialogMaterialStoreCouponP /> -->
</template>
<script setup>
import { useContent } from ".";
const cacheStore = useCacheStore();

const {
    active,
    tabActive,
    bannerList,
    categoryList,
    cate2,
    isLoading,
    list,
    pagination,
    priceSortType,
    onSearch,
    onPriceFilter,
    GetBannerList,
    onPageChange,
    onCateActive,
    GetCategory,
    GetList,
} = useContent();

watch(() => cacheStore.key, async () => {
    await GetBannerList(269);
    await GetCategory();
    await GetList();
})

await GetBannerList(269);
await GetCategory();
await GetList();
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    padding-bottom: 40px;
    background-color: #edf5fa;

    .main {
        width: 80vw;
        margin: 0 auto;
    }

    .search-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;

        :deep() {
            .search-box {
                margin: 0 auto;
            }
        }
    }

    .filter-box {
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        margin-top: 15px;
        padding: 24px 41px;

        .filter-item {
            display: flex;
            align-items: center;
            margin-bottom: 32px;

            &:last-of-type {
                margin-bottom: 0;
            }

            .filter-label {
                display: flex;
                align-items: center;
                height: 28px;
                flex-shrink: 0;
                font-size: 14px;
                color: #666;
                padding-right: 20px;
                align-self: flex-start;
            }

            .filter-group {
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
            }

            .filter-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: #333;
                padding: 0 16px;
                height: 28px;
                cursor: pointer;
                margin-right: 10px;
                border: 1px solid transparent;
                border-radius: 4px;

                &:hover {
                    color: #5085fb;
                    border-color: #5085fb;
                    background: rgba(80, 133, 251, 0.1);
                }

                &.active {
                    background-color: #5085fb;
                    border-color: #5085fb;
                    color: #fff;
                }
            }
        }
    }

    .tabs {
        position: relative;
        display: flex;
        margin-top: 20px;
        height: 40px;
        border-bottom: 1px solid #e6e8eb;
        padding: 0 6px;

        .number-group {
            display: flex;
            align-items: center;
            margin-left: 15px;

            .number-input {
                width: 52px;
                height: 22px;
                background: #ffffff;
                border: 1px solid #e6e8eb;
                outline: none;
                margin: 0 5px;
                text-align: center;
                font-size: 14px;
            }

            .divider {
                width: 16px;
                height: 1px;
                background: #e6e8eb;
            }
        }

        .tab-item {
            display: flex;
            align-items: center;
            height: 100%;
            margin-right: 33px;
            font-size: 14px;
            color: #333;
            cursor: pointer;

            &.active {
                position: relative;
                color: #1982f5;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background-color: #1982f5;
                }
            }

            .icon-sort {
                width: 12px;
                height: 12px;
                margin-left: 7px;
            }
        }

        .consultation-button {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 0;
            bottom: 5px;
            width: 100px;
            height: 28px;
            border-radius: 4px;
            border: 1px solid #5085fb;
            font-weight: 400;
            font-size: 14px;
            color: #5085fb;
            cursor: pointer;
            user-select: none;
        }
    }
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 19px;
    user-select: none;

    :deep(.el-pager) {
        li {
            width: 32px;
            height: 30px;
            border-radius: 6px;
            background-color: #fff;
            font-size: 16px;
            font-weight: 500;
        }
    }

    :deep(.el-pagination) {
        &.is-background {

            .btn-next,
            .btn-prev {
                background-color: #fff;
                padding: 0 10px;
                border-radius: 6px;
            }
        }
    }
}
</style>
